  <template>
    <div class="edayunTable-wrap">
        <div style="overflow: auto;margin-bottom: 10px;">
            <pagination
                :length="total"
                :pagination="pagination"
                @currpage="getTindDetails"
                float="right"
            ></pagination>
        </div>
        <el-table
            ref="table"
            :data="tableData"
            :header-cell-style="getRowClass"
            v-loading="loading"
            border
            style="width: 100%"
        >
            <el-table-column prop="productModelNumber" :label="$t('m.label.productModelNumber')">
                <template slot-scope="scope">
                    <el-link
                        :href="'#/productCenter/productBasicInfo?model='+ scope.row.productModelNumber"
                    >{{scope.row.productModelNumber}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="countryName" :label="$t('m.label.country')"></el-table-column>
            <el-table-column prop="warehouseName" :label="$t('m.label.warehouse')"></el-table-column>
            <el-table-column prop="totalInventory" :label="$t('m.label.physicalInventory')"></el-table-column>
            <el-table-column prop="qty" :label="$t('m.label.availableInventory')"></el-table-column>
            <el-table-column prop="forOutboundInventory" :label="$t('m.label.forOutboundInventory')"></el-table-column>
            <el-table-column :label="$t('m.label.transportationInventory')">
                <template slot-scope="scope">
                    {{scope.row.edit?'':scope.row.transportationInventory}}
                    <el-input-number
                        v-if="scope.row.edit"
                        v-model="scope.row.transportationInventory"
                        size="mini"
                        controls-position="right"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="sku" :label="$t('m.label.SKU')"></el-table-column>
            <el-table-column prop="monthlyOutputQuantity" :label="$t('m.label.monthlyOutputQuantity')"></el-table-column>
            <el-table-column prop="quantityOfReplenishment" :label="$t('m.label.quantityOfReplenishment')"></el-table-column>
            <el-table-column :label="$t('m.label.operating')" fixed="right" width="80">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="editItem(scope.row)"
                        :type="scope.row.edit?'primary':''"
                    >{{scope.row.edit?$t('m.button.save'):$t('m.button.edit')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="overflow: auto;margin-top: 10px;">
            <pagination
                :length="total"
                :pagination="pagination"
                @currpage="getTindDetails"
                float="right"
            ></pagination>
        </div>
         <scrollTable ref="scrollTable"></scrollTable>
    </div>
</template>
<script>
import pagination from "components/pagination/pagination.vue";
import { getEdayunTable } from "./http";
import scrollTable from "components/scroll/scroll-table.vue";
const ERR_OK = 200;
export default {
    props: ["formData"],
    data() {
        return {
            loading: true,
            tableData: [],
            URL: "",
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            total: 0
        };
    },
    created() {
        this.getTindDetails();
    },
    mounted(){
        this.$emit('columns',this.$refs.table.columns)
        this.$refs.scrollTable.scrollShow(this.$refs.table);
    },
    methods: {
        getTindDetails() {
            this.loading = true;
            this.tableData = [];
            this.formData.pageNumber = this.pagination.currpage
            this.formData.pageSize = this.pagination.pagesize
            getEdayunTable(this.formData).then(res => {
                if (res.data.code === ERR_OK) {
                    let data = res.data.data.data;
                    if (data) {
                        data.forEach(item => {
                            item.edit = false;
                        });
                    }
                    this.tableData = data;
                    this.total = res.data.data.total;
                }
                this.loading = false;
            })
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        },
        // 编辑
        editItem(item) {
            item.edit = item.edit ? false : true;
            if (item.edit === false) {
                this.update(item);
            }
        },
        update(item) {
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.thirdPartInventory +
                    "/edaSearch/save?countryName=" +
                    item.countryName +
                    "&sku=" +
                    item.sku +
                    "&transportationInventory=" +
                    item.transportationInventory +
                    "&warehouseName=" +
                    item.warehouseName
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$message.success(this.$t('m.message.editSuccess'));
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        }
    },
    watch: {
        formData() {
            this.pagination.currpage = 1;
            this.total = 0;
            this.getTindDetails();
        }
    },
    components: {
        pagination,
        scrollTable
    }
};
</script>
